<template>
    <div class="apps">
        <div class="search">
            <van-search v-model="value" shape="round" background="none" placeholder="搜索相关商品">
                <template #left-icon>
                    <img src="../../assets/首页_slices/Vector.png" alt="">
                </template>
            </van-search>
        </div>
        <van-tree-select height="75%" class="custom-tree-select" @click-nav="clickNav" v-model:active-id="activeId"
            v-model:main-active-index="activeIndex" :items="items">
            <template #content>
                <div class="listItem" v-for="item in productlist" key="item.id" @click="routerTo(item)">
                    <div class="shopImg">
                        <van-image fit="cover" style="width: 100%;height: 100%;border-radius: 5px 5px 0 0;"
                            :src="item.image" alt=""></van-image>
                        <!-- <img style="width: 100%;height: 100%;" :src="item.image" alt=""> -->
                    </div>
                    <div class="pre">
                        <div class="shopT">
                            {{ item.name }}
                        </div>
                        <div class="shopP">{{ item.intro }}</div>
                        <div class="shopPrice">
                            <span>￥</span>
                            {{ item.member_price }}
                        </div>
                    </div>
                </div>
            </template>
        </van-tree-select>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRouter } from "vue-router";
const activeId = ref(1);
const activeIndex = ref(0);
import { productlists, getCates } from '../../api/index'

const value = ref('')

const items = ref([
    {
        text: '商城商品',
    },
    {
        text: '报单商品',
    }
]);

const router = useRouter();
const productlist = ref([]);
const routerTo = (item: any) => router.push({
    path: '/home/productdetail/' + item.id,
    params: item
})
const clickNav = (idx) => {
    // console.log(items.value[idx].id)
    productlists({ page_size: 10, field: "is_recom", category_id: items.value[idx].id }).then(res => {
        productlist.value = res.data.data
    })
}
onMounted(() => {
    getCates().then(res => {
        let arr = res.data
        arr.forEach(item => {
            // 检查对象是否有title属性
            if (item.hasOwnProperty('title')) {
                // 将title属性重命名为text
                item.text = item.title;
                // 删除原来的title属性
                delete item.title;
            }
        });
        items.value = arr;
        console.log(arr)
    })
    // 在这里可以执行DOM操作或数据请求
    productlists({ page_size: 10, field: "is_recom", category_id: 2 }).then(res => {
        productlist.value = res.data.data
    })
})

</script>

<style scoped lang="less">
.search {
    width: 375px;
    height: 139px;
    background: #FFFFFF;
    box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.05);
    border-radius: 0px 0px 20px 20px;
    box-sizing: border-box;
    padding-top: 76px;

    .van-search {
        padding: 0 15px;
        height: 34px;
        background: #FFFFFF;

        & :-deep(.van-cell__value--alone) {
            font-size: 12px;
            color: #979797;
        }

        .van-field__left-icon {
            img {
                width: 13px;
                height: 13px;
            }
        }
    }

    .van-tree-select__content {
        background: #343434;
    }

    .custom-tree-select :deep(.van-tree-select__content) {
        background: #343434;
    }
}

.apps {
    height: 100vh;
}

:deep(.custom-tree-select) {
    height: calc(100vh-400px) !important;
}

:deep(.van-image__img) {
    border-radius: 3px 3px 3px 3px;
}
</style>
<style lang="less">
.custom-tree-select {
    margin-top: 20px;

    // height: 100vh;
    .van-tree-select__content {
        display: flex;
        flex-direction: column;

        .listItem {
            display: flex;
            padding: 0 15px;
            margin-top: 17px;

            .shopImg {
                // background: blue;
                width: 80px;
                height: 60px;
                border-radius: 3px 3px 3px 3px;


            }

            .pre {
                flex: 1;
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                justify-content: space-around;
                margin: 0 7px;
                text-align: left;

                .shopT {
                    font-weight: 700;
                    font-size: 12px;
                    color: #343434;
                    margin-top: -5px;
                }

                .shopP {
                    font-size: 11px;
                    color: #666666;
                }

                .shopPrice {
                    span {
                        font-size: 12px;
                    }

                    margin-top: 5px;
                    font-weight: 700;
                    font-size: 15px;
                    /* 根据需要设置字体大小 */
                    background: linear-gradient(49.56276305112369deg, #EB4A4A 0%, #EA7A7A 100%);
                    background-clip: text;
                    color: transparent;
                    /* 使文本颜色透明，以显示背景渐变 */
                    display: inline-block;
                    /* 确保背景渐变只应用于文本 */
                }
            }
        }
    }

    .van-sidebar-item--select {
        font-weight: 500;
        font-size: 16px;
        color: #232323;
    }

    .van-sidebar-item--select::before {
        width: 4px;
        height: 21px;
        background: linear-gradient(143deg, #0A84FF 0%, #0A7EF3 100%);
        border-radius: 347px 347px 347px 347px;
    }
}
</style>